<template>
  <div
    :class="[
      'lib-list',
      'mgt10p',
      'pd1020p',
      'border-none',
      state.isSelected === 0 ? 'bc2' : 'bc1',
    ]"
    @click="fnSelected"
  >
    <div class="float-left h90p cc-display">
      <div class="h40p w60p white cc-display boder1s br4p">
        <span class="fs20">{{ state.id }}</span>
      </div>
    </div>
    <div class="float-left mgl10p">
      <QuestionType :msg="{ text: state.text }" />
      <QuestionDescribe :msg="{ text: state.describe }" />
    </div>
    <div class="clean-float"></div>
  </div>
</template>

<script>
import { reactive } from "vue";
import QuestionType from "../../Text/QuestionType/QuestionType.vue";
import QuestionDescribe from "../../Text/QuestionDescribe/QuestionDescribe.vue";

export default {
  // 组件
  components: {
    QuestionType,
    QuestionDescribe,
  },
  // 父组件传值
  props: {
    msg: Object,
  },
  // 父组件时间
  emits: ["item-selected"],
  // 钩子
  setup(props, { emit }) {
    // 双向绑定数据
    const state = reactive({
      text: props.msg?.title || "default",
      describe: props.msg?.describe || "default",
      id: props.msg?.id || "default",
      type: props.msg?.questionType || 0,
      isSelected: props.msg?.isSelected || 0,
    });
    // 选择
    const fnSelected = () => {
      state.isSelected = 1;
      emit("item-selected", { id: state.id, type: state.type });
    };
    // 传入模板
    return {
      state,
      fnSelected,
    };
  },
};
</script>

<style scoped>
.lib-list {
  width: 100%;
}
</style>
